<script>
import Child from "../components/Child.vue";
export default {
  name: "Parent",
  components:{
    Child
  },
  methods:{
    setAvatar(file){
      console.log('我是父组件，获取到的头像:',file)
      //创建文件流
      let reader = new FileReader();
      //读取文件
      reader.readAsDataURL(file);
      //获取头像标签
      let image = this.$refs.avatar;
      //使用文件流设置加载事件
      reader.addEventListener('load',()=>{
        //设置文头像件
        image.src = reader.result;
      })

    }
  }
}
</script>

<template>
    <div class="parent">
      <h3>我是父组件</h3>
      <div class="header"><img ref="avatar" src="../assets/default.jpg" alt=""></div>
    <!--    使用子组件 ：采用子组件中自定义的指令来获取值 -->
    <!--getAvatar是一个指令，什么时候触发？当子组件的按钮被单击后就会触发这个指令，
    然后就会执行setAvatar这个函数      -->
      <Child  @getAvatar="setAvatar"/>
    </div>
</template>

<style scoped>
.parent{
  width: 100%;
  height: 100vh;
  border: 1px solid red;
}
  .header{
    text-align: right;
  }

    .header img{
      width: 40px;
      height: 40px;
    }
</style>